<template>
	<view>
		<!-- 标题 -->
		<view class="grace-article-title ggrace-skeleton">{{info.title}}</view>
		<!-- 作者信息 -->
		<!-- <view class="grace-article-author-line">
			<view class="grace-article-author ">
				<image :src="article.authorFcae" mode="widthFix"></image>
				<view class="author-name">{{article.authorName}}</view>
			</view>
			<view class="btn"> + 关注 </view>
		</view> -->
		<!-- 其他基本信息 -->
		<view :class="['grace-article-info-line', graceSkeleton == 'ing' ? 'grace-skeleton' : '']">
			<view>{{info.click_num}}</view>
			<view>发布于{{info.create_time}}</view>
		</view>
		<!-- 文章内容 -->
		<view class="grace-article-contents">
			<view class="content  grace-body">
				<rich-text :nodes="descriptionStr"></rich-text></view>
			<!-- <block v-for="(item, index) in article.contents" :key="index">
			<view :class="['img-item', graceSkeleton == 'ing' ? 'grace-skeleton' : '']" v-if="item.type == 'img'">
				<image :src="item.content" mode="widthFix"></image>
			</view>
			<view :class="['text-item', graceSkeleton == 'ing' ? 'grace-skeleton' : '']" v-if="item.type == 'text'">{{item.content}}</view>
			</block> -->
		</view>
		<!-- 评论区 start -->
		<view class="grace-margin">
			<view class="grace-title" style="margin-top:20px;">
				<view>相关评论</view>
			</view>
			<view class="grace-comments" >
				
				<view class="items" v-for="i in info.comments">
					<view class="face">
						<image :src="i.avatarurl" mode="widthFix"></image>
					</view>
					<view class="body">
						<view class="header">
							<text>{{i.username}}</text><text class="grace-icons icon-zan"></text>
						</view>
						<view class="info">
							<text>{{i.create_time}}</text><text>102</text>
						</view>
						<view class="content">{{i.content}}</view>
					</view>
				</view>
				
			</view>
			<!-- 评论区 end -->
			<view style="height:50px;"></view>
			<!-- 底部回复 -->
			<view class="grace-footer">
				<view class="submit-commnets">
					<view class="icons grace-icons icon-write"></view>
					<input type="text" v-model="text" placeholder="说点什么吧 ..." @input="onKeyUserNameInput" />
				</view>
				<view class="submit-btn" @tap="submitCommnets">发表</view>
			</view>
		</view>
		<!-- 评论区 end -->
	</view>
</template>
<script>
var _self;
var graceRichText = require("../../graceUI/jsTools/richText.js");
export default {
	data() {
		return {
			info:'',
			text:'',
			descriptionStr:'<div style="text-align:center;"><img width="100%"  src="https://s2.ax1x.com/2019/03/28/AdOogx.jpg"/><img width="100%" src="https://s2.ax1x.com/2019/03/28/AdOHKK.jpg"/><img width="100%" src="https://s2.ax1x.com/2019/03/28/AdOTv6.jpg"/></div>',
			graceSkeleton : 'ing',
			article : {
				contents : []
			}
		}
	},
	onLoad() {
		_self = this;
		
		// uni.setNavigationBarTitle({
		// 	title: option.name
		// });
		// 
	
		this.content(5)
		// 加载文章详情

	},
	methods: {
		content:function(id){
			this.gRequest.get(
				'/api/article', {
					article_id:id
				},
				function(res) {
					   _self.descriptionStr = graceRichText.format(res.content);
					   _self.info=res
					   uni.hideLoading();
				}.bind(this)
				
			);
		
		},
		onKeyUserNameInput: function(event) {  
					this.text = event.target.value  
				},  
		submitCommnets:function(){
			if (this.text=='') {
				uni.showToast({
				    title: '请输入发表的内容',
				    duration: 2000
				});
			} else{
				this.gRequest.get(
					'http://ts.leftgodheart.top/api/addcomment', {
						article_id:5,
						member_id:45,
						content:this.text
					},
					function(res) {
						uni.showToast({
						    title: res.errMsg,
						    duration: 2000
						});
						 this.text='' 
						
						 this.content(5)
					}.bind(this)
				);
			}
			
			
		}		
	},
			
}
</script>
<style>
	image{
		width: 100%;
	}
.grace-footer{height:36px; padding:5px 0; display:flex; flex-wrap:nowrap;}
.grace-footer .submit-commnets{display:flex; width:100%; margin-left:16px; margin-right:6px; flex-wrap:nowrap; background:#F8F8F8; border-radius:36px; padding:0 15px;}
.grace-footer .submit-commnets .icons{width:36px; height:36px; font-size:18px; line-height:36px; text-align:center; flex-shrink:0;}
.grace-footer .submit-commnets input{width:100%; height:36px; line-height:36px; background:none; font-size:14px; margin:0 5px;}
.grace-footer .submit-btn{display:inline-block; padding:0 12px; line-height:36px; color:#3688FF; flex-shrink:0; margin-right:5px;}
</style>